<!-- 返回按钮 -->
<template>
	<view class="navbar-btn flex flex-center" :class="[btnType, showNavBtn && 'show']">
		返回
		<view class="navbar-btn-split"></view>
		首页
	</view>
</template>

<script>
	// 隐藏上方跳转按钮的的页面
	const hiddenIconUrl = [
		'/pages/home/index',
	];
	export default {
		props: {
			btnType: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				leftIcon: null,
				currentIconSize: 0,
				showNavBtn: false
			};
		},
		mounted() {
			this.handleSetLeftIcon();
		},
		computed: {
			// 是否可以跳转到首页
			canPathToHome() {
				return this.leftIcon === 'home';
			}
		},
		methods: {
			handleSetLeftIcon() {
				// this.showNavBtn = false;
				if (getCurrentPages().length === 1) {
					const firstPagePath = getCurrentPages()[0].$page.fullPath;
					// 隐藏icon的路径
					if (hiddenIconUrl.includes(firstPagePath)) {
						this.leftIcon = null;
						this.showNavBtn = false;
					} else {
						this.leftIcon = 'home';
						this.showNavBtn = true;
					}
				} else {
					// 其余情况显示返回按钮
					this.leftIcon = 'arrow-left';
					this.showNavBtn = true;
				}
			},
			setIcon(key) {
				// 返回样式
				const iconMap = {
					back: {
						index: 'index/back@2x.png',
						businessCard: 'index/back_white.png'
					},
					home: {
						index: 'index/index@2x.png',
						businessCard: 'index/index_white.png'
					}
				};
				return this.$setHttpStatic(iconMap[key][this.btnType]);
			},
			handleLeftBack(type) {
				const currentPageNum = getCurrentPages().length
				// 当页面总数为一的时候 重新打开应用程序返回首页
				if (currentPageNum === 1) {
					uni.reLaunch({
						url: '/pages/adviceIndex/index/customer'
					});
					return;
				}
				if (type === 'back') {
					const {
						options
					} = this.$getLastPage();

					// 是否可以返回主页
					this.canPathToHome ?
						uni.navigateBack({
							// delta大于页面总数会跳回首页
							// 优化重新打开应用导致的卡顿
							delta: 99
						}) :
						uni.navigateBack({});
					return;
				}
				uni.navigateBack({
					// delta大于页面总数会跳回首页
					// 优化重新打开应用导致的卡顿
					delta: 99
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbar-btn {
		box-sizing: border-box;
		padding: 13rpx 25rpx;
		border-radius: 30rpx;
		opacity: 0;

		&-split {
			height: 36rpx;
			width: 2rpx;
			margin: 0 23rpx;
		}

		&.show {
			opacity: 1;
		}

		&.businessCard {
			background-color: #000000;

			.navbar-btn-split {
				background-color: #ffffff;
			}
		}

		&.index {
			background-color: #ffffff;
			border: 1px solid #e3e4e5;

			.navbar-btn-split {
				background-color: #e3e4e5;
			}
		}
	}
</style>